import React, { useEffect, useState } from 'react';
import { t } from '@lingui/macro';
import { Drawer, Tab } from '@alifd/next';
import { useStore } from '@/hooks';
import { observer } from 'mobx-react-lite';

import DataForm from './DataForm';
import Logs from './Logs';
import PushMessage from './PushMessage';
import ChatMessages from './ChatMessages';

const BaseModal = ({ data, modal: show, onCancel, onSubmit, ...formProps }) => {
  const { orderStore: store } = useStore();
  const [modal, setModal] = useState(show);

  useEffect(() => {
    setModal(show);
    return () => {
      store._tab_status = '1';
    };
  }, [show]);

  const _TAB_TYPE = [
    { name: t`订单信息`, key: '1', component: <DataForm modal={modal} id={modal.record?.id} onCancel={onCancel} onSubmit={onSubmit} {...formProps} /> },
    { name: t`订单日志`, key: '2', component: <Logs modal={modal} /> },
    { name: t`推送日志`, key: '3', component: <PushMessage modal={modal} /> },
    { name: t`聊天消息`, key: '4', component: <ChatMessages modal={modal} /> },
  ];

  const TITLE_TEXT = {
    add: t`添加成员`,
    view: t`查看订单`,
    edit: t`编辑订单`,
  };

  return (
    <Drawer
      visible={modal.show === 'add' || modal.show === 'view' || modal.show === 'edit'}
      title={TITLE_TEXT[modal.show]}
      style={{ maxWidth: '90%' }}
      closeMode={['esc', 'mask', 'close']}
      onClose={() => setModal({ ...modal, toClose: `toClose$${Date.now()}` })}
      width="100%"
    >
      <Tab
        defaultActiveKey={'1'}
        activeKey={store.tab_Status}
        onChange={(v) => { store.tab_Status = v; }}
      >
        {_TAB_TYPE.map((p) => (
          <Tab.Item title={p.name} key={p.key}>
            {p.component}
          </Tab.Item>))}
      </Tab>
    </Drawer>
  );
};

export default observer(BaseModal);
